<template>
  <div class="three-container"
       ref="container">
    <div class="controls">
      <button @click="toggleNightMode">切换日夜模式</button>
      <button @click="toggleBloom">切换泛光效果</button>
      <button @click="toggleShadows">切换阴影</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as THREE from 'three'
import { useSceneStore } from '@/stores/scene'
import { useUserStore } from '@/stores/user'
import { SceneManager } from '@/core/scene/SceneManager'

const container = ref<HTMLElement | null>(null)
const sceneStore = useSceneStore()
const userStore = useUserStore()
let sceneManager: SceneManager
let animationFrameId: number

const init = () => {
  if (!container.value) return

  // 初始化场景管理器
  sceneManager = new SceneManager()

  // 将渲染器添加到容器中
  const renderer = sceneManager.getRendererManager().getRenderer()
  container.value.appendChild(renderer.domElement)

  // 开始动画循环
  animate()

  // 处理窗口大小变化
  window.addEventListener('resize', onWindowResize)
}

const animate = () => {
  animationFrameId = requestAnimationFrame(animate)
  sceneManager.update()
}

const onWindowResize = () => {
  if (!container.value) return
  const renderer = sceneManager.getRendererManager().getRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
}

// 场景控制函数
const toggleNightMode = () => {
  sceneStore.toggleNightMode()
}

const toggleBloom = () => {
  sceneStore.toggleBloom()
}

const toggleShadows = () => {
  sceneStore.toggleShadows()
}

onMounted(() => {
  init()
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', onWindowResize)
  cancelAnimationFrame(animationFrameId)
  if (container.value && sceneManager) {
    const renderer = sceneManager.getRendererManager().getRenderer()
    container.value.removeChild(renderer.domElement)
  }
})

// 更新用户设置
userStore.updateSettings({
  musicVolume: 0.8,
  movementSpeed: 1.2
})

// 添加访问记录
userStore.addVisitedArticle('article-123')
</script>

<style scoped>
.three-container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.controls {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 100;
}

.controls button {
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.controls button:hover {
  background-color: rgba(255, 255, 255, 1);
}
</style> 